<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生信息表案例(添加本地存储功能,重构代码)</title>
    <link rel="stylesheet" href="index.css"> <!-- 加载CSS文件 -->
</head>
<body>

<h1>新增学员</h1>
<form class="录入学员信息" autocomplete="off">
    姓名：<input type="text" class="姓名" name="姓名"/>
    年龄：<input type="text" class="年龄" name="年龄"/>
    性别:
    <select name="性别" class="性别">
        <option value="男">男</option>
        <option value="女">女</option>
    </select>
    薪资：<input type="text" class="薪资" name="薪资"/>
    就业城市：<select name="就业城市" class="就业城市">
    <option value="北京">北京</option>
    <option value="上海">上海</option>
    <option value="广州">广州</option>
    <option value="深圳">深圳</option>
    <option value="曹县">曹县</option>
</select>
    <button class="录入">录入</button>
</form>

<h1>就业榜</h1>
<div class=" 数据条目">
    <span>共有0条数据</span>
</div>
<table>
    <thead>
    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>薪资</th>
        <th>就业城市</th>
        <th>录入时间</th>
        <th>操作</th>
    </tr>
    </thead>
    <!--    这里以下的标签tbody, 是显示我们录入的内容. 通过JS渲染实现-->
    <tbody>
    <!-- 内容格式如下
      <tr>
        <td>1001</td>
        <td>欧阳霸天</td>
        <td>19</td>
        <td>男</td>
        <td>15000</td>
        <td>上海</td>
        <td>2023/12/27 16:00:00</td>
        <td>
          <a href="javascript:">删除</a>
        </td>
      </tr>
      -->
    </tbody>
</table>

<!--
案例要求:
①： 点击录入按钮可以录入数据
②： 点击删除可以删除当前的数据
3.  使用 本地存储功能, 实现页面刷新 数据仍然保留
-->

<script>

    // 要转换成为 JSON数据 存储
    // localStorage.setItem('数据', JSON.stringify(数组_学员录入信息)) // 在把JSON类型数据, 存储 本地存储

    // 全局变量
    const 录入学员信息 = document.querySelector('.录入学员信息') // 获取DOM元素
    const tbody标签 = document.querySelector('tbody') // 获取DOM元素
    // 获取数据, 并且转换成原来的数组类型
    let 数组_学员录入信息 = JSON.parse(localStorage.getItem('数据')) || [] // 这里使用短路方法, 检查是否有数据 如果没有建一个空数组


    // 渲染页面, 封装一个函数
    function 渲染页面() {
        // 利用 map 遍历数组, 返回一个新数组
        const 渲染页面_数组数据 = 数组_学员录入信息.map(function (元素, 索引号) {
            return `
            <tr>
                <td>${元素.对象id}</td>
                <!-- <td>${元素.索引号}</td> 解决页面里学号不连续问题(且是自动排序),也可以使用这种-->
                <td>${元素.姓名}</td>
                <td>${元素.年龄}</td>
                <td>${元素.性别}</td>
                <td>${元素.薪资}</td>
                <td>${元素.就业城市}</td>
                <td>${元素.录入时间}</td>
                <td>
                    <a href="javascript:" data-id="${索引号}">删除</a> <!-- 这里设置 data自定义属性,是配合 渲染和删除 模块的 -->
                </td>
            </tr>
                `
        })

        // 把我们得到的数组,转换成一个字符串
        const 字符串 = 渲染页面_数组数据.join('') // 参数是 空字符, 转换的字符串没有分隔符
        // 把内容添加到 标签tbody 里
        tbody标签.innerHTML = 字符串 // 修改标签里的内容

        // 显示有几条数据
        const span标签 = document.querySelector('.数据条目 span') // 获取DOM元素
        span标签.innerHTML = `共有${渲染页面_数组数据.length}条数据` // 数组里有几个元素,就是几条数据
    }


    // 添加录入模块:  监控 表单提交事件
    录入学员信息.addEventListener('submit', function (事件对象) {
        事件对象.preventDefault() // 阻止默认行为, 这里是阻止表单提交 默认页面会跳转
        // console.log(11) // 控制台测试, 如果是提交的默认行为 信息会一闪而过

        /*
        点击录入,需要验证表单 没有空的
        (1). 获取所有需要填写的表单， 他们共同特点都有 name属性
        (2). 遍历这些表单，如果有一个值为空，则return 返回提示输入为空中断程序
        (3). 注意书写的位置，应该放到新增数据的前面， 阻止默认行为的后
        */
        const 数组_name属性 = document.querySelectorAll('.录入学员信息 [name]') // []属性选择器
        // 遍历数组, 依次判断 name属性 相关标签里的, 内容是否空
        for (let i = 0; i < 数组_name属性.length; i++) {
            // 判断 文本框里的内容是否, 空
            if (数组_name属性[i].value === '') {
                return alert('内容必须全部填写,不能有空的')
                // return 如果执行, 下面的代码就不在执行. 从而实现中断功能
            }
        }

        // 获取DOM元素,记录数据到 对象 用
        const 姓名 = document.querySelector('.姓名')
        const 年龄 = document.querySelector('.年龄')
        const 性别 = document.querySelector('.性别')
        const 薪资 = document.querySelector('.薪资')
        const 就业城市 = document.querySelector('.就业城市')

        // 创建对象,存储一位学员的信息
        const 当前时间 = new Date() // 实例化,时间对象
        const 对象_学员的信息 = { //数组长度0,赋值1          [数组_学员录入信息.length - 1]是数组的最后一个元素, 元素对象里id的值+1  这种解决页面里学号不连续的问题(非自动排序)
            对象id: (数组_学员录入信息.length === 0 ? 对象id = 1 : 数组_学员录入信息[数组_学员录入信息.length - 1].对象id + 1), // 三元表达式赋值
            姓名: 姓名.value, // value文本框的信息, 这里我们要读取我们输入文本框里的信息
            年龄: 年龄.value,
            性别: 性别.value,
            薪资: 薪资.value,
            就业城市: 就业城市.value,
            录入时间: `${当前时间.toLocaleString('chinese', {hour12: false})}`
        }
        console.log(对象_学员的信息) //控制台输出 对象信息,看是否录入成功

        // 追加对象到数组里
        数组_学员录入信息.push(对象_学员的信息)
        // 清空表单填写的信息  reset重置
        录入学员信息.reset()

        // 存储到 本地存储 里,          先把数组转换为 JSON类型数据
        localStorage.setItem('数据', JSON.stringify(数组_学员录入信息)) // 在把JSON类型数据, 存储 本地存储

        // 调用渲染函数
        渲染页面()
    })


    // 删除模块: 利用事件委托, 监控 删除按钮(点击输出可以删除相应的条目)
    tbody标签.addEventListener('click', function (事件对象) {
        if (事件对象.target.tagName === 'A') { // 删除按钮在a标签里
            console.log(事件对象.target.dataset.id) // 控制台输出,当前元素的自定义属性 data-id 看是否正确


            // confirm 是一个弹出框.  如果点确定 返回值true, 点取消 返回值false.
            // 通过返回值来控制if,是否执行
            if (confirm('确定删除这条数据吗')) {
                // 删除数组里,对应的对象
                let 下标 = +(事件对象.target.dataset.id) // 这个自定义属性的值, 就当作数组的 下标. +()是转换成数字类型
                数组_学员录入信息.splice(下标, 1) //起始位置下标,删除的个数

                // 把修改的数组数据, 重新赋值 本地存储.   密钥 对应的值效果数据
                localStorage.setItem('数据', JSON.stringify(数组_学员录入信息)) // 先把数组转换为 JSON类型数据, 在把JSON类型数据, 存储 本地存储

                // 再次重新渲染页面信息
                渲染页面()
            }
        }
    })


    // 刷新页面,可以显示数据
    渲染页面()

</script>

</body>
</html>